<template>
    <div class="face-check-container">
        <!-- 面部识别模块 -->
        <h4 class="title">面部注册识别模块</h4>
        <!-- <el-button>开启摄像头</el-button> -->
        <!-- <input type="button" title="开启摄像头" value="开启摄像头" @click="getMedia()" /> -->
        <video id="video" autoplay="autoplay"></video>
        <el-button v-if="!userId" type="primary" id="snap" @click="takePhoto()">拍照注册</el-button>
        <el-button v-if="userId" type="primary" id="snap" @click="checkPhoto()">拍照校验</el-button>
        <h4 class="title">拍照结果如下</h4>
        <canvas id="canvas" width="300px" height="300px"></canvas>
        
    </div>
</template>
<script>
import * as userApi from '@/api/userApi.js';
// import axios from 'axios';
//获得video摄像头区域
let video = document.getElementById("video");
export default {
    data(){
        return {
            base64Img:'',
            userId: ''
        }
    },
    methods:{
       getMedia() {
            let constraints = {
                video: { width: 375, height: 375 },
                audio: true
            };
            /*
            这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
            这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
            返回的是一个Promise对象。
            如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
            如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
            */
           navigator.mediaDevices.getUserMedia(constraints)
                .then(function(mediaStream) {
                video = document.querySelector('video');
                video.srcObject = mediaStream;
                video.onloadedmetadata = function() {
                    video.play();
                };
            })
            .catch(function(err) { console.log(err.name + ": " + err.message); });
        },
        takePhoto() {
            //获得Canvas对象
            video = document.getElementById("video");
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 300, 300);
            let dataurl = canvas.toDataURL("image/jpeg");
            // axios.post('http://192.168.31.203:8087/scan/face/register/base64',{imageStr: dataurl}).then(
            userApi.registerUser({imageStr: dataurl}).then(
                res => {
                    if(res.data.statusCode=='200'){
                        this.userId = res.data.data;
                        localStorage.setItem('isFaceCheckId', res.data.data);
                        this.$message({
                            message: '恭喜你，面部注册成功',
                            type: 'success'
                        });
                    }
                }
            )   
        // 将base64的图片转成blob格式
        },
        checkPhoto(){
            //获得Canvas对象
            video = document.getElementById("video");
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 300, 300);
            let dataurl = canvas.toDataURL("image/jpeg");
            // 因为单页面无法获取到用户是否已经注册过的信息，所以临时通过变量来处理
            const params = {userId: this.userId,imageStr: dataurl};
            /**
             * 因为单独页面的缘故，填写接口的完整请求地址（存在跨域问题）
             * 在框架中可以拆分到指定的接口文件中，通过配置ngnix或者本地node代理解决
             */
                // 因为单独页面的缘故，填写接口的完整请求地址（存在跨域问题），在框架中可以拆分到指定的接口文件中（更容易维护）
                // axios.post('http://192.168.31.203:8087/scan/face/compare/base64', params).then(
                userApi.checkUser(params).then(
                    res => {
                        if(res.data.statusCode=='200'){
                            this.$message({
                                message: '恭喜你，校验成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    }
                )
        }
    },
    created(){
       this.getMedia(); 
    }
}
</script>
<style scoped>
    .face-check-container {
        height: 100vh;
        width: 96vw;
        overflow-y: scroll;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #999;
        color: #fff;
    }
    .face-check-container video {
        height: 300px;
        width: 300px;
        border-radius: 50%;
        border: 1px solid #eee;
        margin-bottom: 10px;
    }
    .face-check-container canvas {
        border-radius: 50%;
        border: 1px solid #eee;
        margin-top: 10px;
    }
    .face-check-container .title {
        margin: 10px 0;
    }
</style>